<template>
    <div class="app">
        <Header/>
        <!-- 导航区 -->
        <div class="navigate">
            <!-- 第一种to的写法（字符串） -->
            <RouterLink to="/home" active-class="active">首页</RouterLink>
            <RouterLink to="/news" active-class="active">新闻</RouterLink>
            <!-- <RouterLink to="/about" active-class="active">关于</RouterLink> -->
            <!-- 第二中to的写法（对象） -->
            <RouterLink :to="{ path: '/about' }" active-class="active">关于</RouterLink>
        </div>
        <!-- 展示区 -->
        <div class="main-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script lang="ts" setup name="App">
    import Header from './components/Header.vue';
    import { RouterView, RouterLink } from 'vue-router';
    /* 1. RouterView组件告诉路由器在切换路由时，路由组件挂载的位置。
       2. RouterLink组件代替a组件，用于切换路由，其中to用于指定路由，active-class用于
          指示RouterLink组件处于active时使用的样式。 */
</script>

<style>
    .navigate {
        display: flex;
        justify-content: space-around;
        margin: 0 100px;
    }
    .navigate a {
        display: block;
        text-align: center;
        width: 90px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background-color: gray;
        text-decoration: none;
        color: white;
        font-size: 18px;
        letter-spacing: 5px;
    }
    .navigate a.active {
        background-color: #64967E;
        color: #ffc268;
        font-weight: 900;
        text-shadow: 0 0 1px black;
        font-family: 微软雅黑;
    }
    .main-content {
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 10px;
        width: 90%;
        height: 400px;
        border: 1px solid;
    }
</style>